<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Close from "@iconify-icons/ep/close";
import Service from "@iconify-icons/ep/service";
import More from "@iconify-icons/ep/more-filled";
import View from "@iconify-icons/ep/view";
import { usePublicHooks } from "@/views/hooks";
import { PlusSearch } from "plus-pro-components";
import {
  searchState,
  searchColumns,
  columns,
  childColumns,
  filterStatus,
  statusFilterList,
  pagination,
  productList,
  handleRowClick,
  expandedRowKeys,
  getStatusList,
  handleSelect,
  handlerSearch,
  handlePageChange,
  handleSizeChange,
  handleExpandChange,
  changeOrderStatus,
  changeOrderStatusClose,
  changeOrderStatusProblem,
  useDialog,
  useDetail,
  exportExcle
} from "./utils/hook";

const { toDetail } = useDetail();
// 使用 addDialog 弹窗
const { addOrderDialog, uploadExcleDialog } = useDialog();

// 通用按钮样式（与用户管理等页面保持一致）
const { buttonClass } = usePublicHooks();

onMounted(() => {
  getStatusList();
});
</script>

<template>
  <div>
    <el-card shadow="never" header-class="header-class">
      <!-- 订单状态筛选 -->
      <el-menu
        :default-active="filterStatus"
        class="el-menu-demo !h-10 !mb-2"
        mode="horizontal"
        @select="handleSelect"
        style="height: 46px"
      >
        <el-menu-item
          v-for="item in statusFilterList"
          :key="item.value"
          :index="item.value"
          >{{ item.label }}</el-menu-item
        >
      </el-menu>
      <!-- 多条件查询 -->
      <PlusSearch
        v-model="searchState"
        :columns="searchColumns"
        :hasUnfold="false"
        labelPosition="right"
        :rowProps="{ gutter: 10 }"
        :colProps="{ xs: 24, sm: 12, md: 6 }"
      >
        <template #footer="{ handleReset }">
          <!-- 自定义按钮 -->
          <div style="display: flex">
            <el-button type="primary" plain @click="handlerSearch"
              >查找</el-button
            >
            <el-button type="danger" plain @click="handleReset">重置</el-button>
            <el-button type="success" plain @click="addOrderDialog()"
              >新增</el-button
            >
            <el-button type="warning" plain @click="uploadExcleDialog()"
              >导入</el-button
            >
            <el-button type="warning" plain @click="exportExcle()"
              >导出</el-button
            >
          </div>
        </template>
      </PlusSearch>

      <!-- 表单区域 -->
      <pure-table
        :columns="columns"
        :data="productList"
        :row-key="row => row.orderno"
        :expand-row-keys="expandedRowKeys"
        @expand-change="handleExpandChange"
        :pagination="pagination"
        @page-current-change="handlePageChange"
        @page-size-change="handleSizeChange"
        @row-click="handleRowClick"
      >
        <!-- 更多操作 -->
        <template #operation="{ row }">
          <el-button
            link
            type="primary"
            :icon="useRenderIcon(View)"
            @click="toDetail({ id: row.orderno }, 'params')"
          >
            查看
          </el-button>
          <el-dropdown>
            <el-button
              class="ml-3 mt-[2px]"
              link
              type="primary"
              :icon="useRenderIcon(More)"
            />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-button
                    :class="buttonClass"
                    link
                    type="danger"
                    :icon="useRenderIcon(Close)"
                    @click="changeOrderStatusClose(row)"
                  >
                    取消订单
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    :class="buttonClass"
                    link
                    type="danger"
                    :icon="useRenderIcon(Service)"
                    @click="changeOrderStatusProblem(row)"
                  >
                    申请售后
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>

        <!-- 子表格区域 -->
        <template #expand="{ row }">
          <div class="m-4">
            <pure-table :data="row.productinfo" :columns="childColumns" />
            <div class="mt-4 p-3 bg-gray-50 rounded-lg">
              <div class="flex items-start">
                <span class="text-sm font-medium text-gray-700 mr-2 mt-0.5"
                  >订单备注:</span
                >
                <div class="flex-1 min-w-0">
                  <el-input
                    v-model="row.note"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入订单备注"
                    class="text-sm"
                    @change="changeOrderStatus(row)"
                  />
                </div>
              </div>
            </div>
          </div>
        </template>
      </pure-table>
    </el-card>

    <!-- 弹窗由 addDialog 管理，这里无需再渲染本地 Dialog -->
  </div>
</template>

<style>
.el-card__header {
  /* height: 30px; */
  border-bottom: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.el-card__body {
  padding-top: 10px;
}
</style>
